﻿@using System.Text
@{
    ViewBag.Title = "Master/Child demo";
}
@section CssImport
{
    <style>
        .child-opener-image
        {
            cursor: pointer;
        }
        .child-opener-image-column
        {
            text-align: center;
        }
        .jtable-dialog-form
        {
            min-width: 220px;
        }
        .jtable-dialog-form input[type="text"]
        {
            min-width: 200px;
        }
    </style>
}
<div id="StudentTableContainer"></div>
<script type="text/javascript">

    $(document).ready(function () {

        $('#StudentTableContainer').jtable({
            title: 'Student List',
            paging: true, //Enable paging
            sorting: true, //Enable sorting
            defaultSorting: 'Name ASC',
            //openChildAsAccordion: true, //Enable this line to show child tabes as accordion style
            actions: {
                listAction: '@Url.Action("StudentList")',
                deleteAction: '@Url.Action("DeleteStudent")',
                updateAction: '@Url.Action("UpdateStudent")',
                createAction: '@Url.Action("CreateStudent")'
            },
            fields: {
                StudentId: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },
                //CHILD TABLE DEFINITION FOR "PHONE NUMBERS"
                Phones: {
                    title: '',
                    width: '5%',
                    sorting: false,
                    edit: false,
                    create: false,
                    listClass: 'child-opener-image-column',
                    display: function (studentData) {
                        //Create an image that will be used to open child table
                        var $img = $('<img class="child-opener-image" src="/Content/images/Misc/phone.png" title="Edit phone numbers" />');
                        //Open child table when user clicks the image
                        $img.click(function () {
                            $('#StudentTableContainer').jtable('openChildTable',
                                    $img.closest('tr'),
                                    {
                                        title: studentData.record.Name + ' - Phone numbers',
                                        actions: {
                                            listAction: '@Url.Action("PhoneList")?StudentId=' + studentData.record.StudentId,
                                            deleteAction: '@Url.Action("DeletePhone")',
                                            updateAction: '@Url.Action("UpdatePhone")',
                                            createAction: '@Url.Action("CreatePhone")'
                                        },
                                        fields: {
                                            StudentId: {
                                                type: 'hidden',
                                                defaultValue: studentData.record.StudentId
                                            },
                                            PhoneId: {
                                                key: true,
                                                create: false,
                                                edit: false,
                                                list: false
                                            },
                                            PhoneType: {
                                                title: 'Phone type',
                                                width: '30%',
                                                options: { '1': 'Home phone', '2': 'Office phone', '3': 'Cell phone' }
                                            },
                                            Number: {
                                                title: 'Phone Number',
                                                width: '30%'
                                            },
                                            RecordDate: {
                                                title: 'Record date',
                                                width: '20%',
                                                type: 'date',
                                                displayFormat: 'yy-mm-dd',
                                                create: false,
                                                edit: false
                                            }
                                        }
                                    }, function (data) { //opened handler
                                        data.childTable.jtable('load');
                                    });
                        });
                        //Return image to show on the person row
                        return $img;
                    }
                },
                //CHILD TABLE DEFINITION FOR "EXAMS"
                Exams: {
                    title: '',
                    width: '5%',
                    sorting: false,
                    edit: false,
                    create: false,
                    listClass: 'child-opener-image-column',
                    display: function (studentData) {
                        //Create an image that will be used to open child table
                        var $img = $('<img class="child-opener-image" src="/Content/images/Misc/note.png" title="Edit exam results" />');
                        //Open child table when user clicks the image
                        $img.click(function () {
                            $('#StudentTableContainer').jtable('openChildTable',
                                    $img.closest('tr'), //Parent row
                                    {
                                    title: studentData.record.Name + ' - Exam Results',
                                    actions: {
                                        listAction: '@Url.Action("ExamList")?StudentId=' + studentData.record.StudentId,
                                        deleteAction: '@Url.Action("DeleteExam")',
                                        updateAction: '@Url.Action("UpdateExam")',
                                        createAction: '@Url.Action("CreateExam")'
                                    },
                                    fields: {
                                        StudentId: {
                                            type: 'hidden',
                                            defaultValue: studentData.record.StudentId
                                        },
                                        StudentExamId: {
                                            key: true,
                                            create: false,
                                            edit: false,
                                            list: false
                                        },
                                        CourseName: {
                                            title: 'Course name',
                                            width: '40%'
                                        },
                                        ExamDate: {
                                            title: 'Exam date',
                                            width: '30%',
                                            type: 'date',
                                            displayFormat: 'yy-mm-dd'
                                        },
                                        Degree: {
                                            title: 'Degree',
                                            width: '10%',
                                            options: ["AA", "BA", "BB", "CB", "CC", "DC", "DD", "FF"]
                                        }
                                    }
                                }, function (data) { //opened handler
                                    data.childTable.jtable('load');
                                });
                        });
                        //Return image to show on the person row
                        return $img;
                    }
                },
                Name: {
                    title: 'Name',
                    width: '20%'
                },
                EmailAddress: {
                    title: 'Email address',
                    list: false
                },
                Password: {
                    title: 'User Password',
                    type: 'password',
                    list: false
                },
                Gender: {
                    title: 'Gender',
                    width: '11%',
                    options: { 'M': 'Male', 'F': 'Female' }
                },
                CityId: {
                    title: 'City',
                    width: '12%',
                    options: '@Url.Action("GetCityOptions")'
                },
                BirthDate: {
                    title: 'Birth date',
                    width: '15%',
                    type: 'date',
                    displayFormat: 'yy-mm-dd'
                },
                Education: {
                    title: 'Education',
                    list: false,
                    type: 'radiobutton',
                    options: { '1': 'Primary school', '2': 'High school', '3': 'University' }
                },
                About: {
                    title: 'About this person',
                    type: 'textarea',
                    list: false
                },
                IsActive: {
                    title: 'Status',
                    width: '12%',
                    type: 'checkbox',
                    values: { 'false': 'Passive', 'true': 'Active' },
                    defaultValue: 'true'
                },
                RecordDate: {
                    title: 'Record date',
                    width: '15%',
                    type: 'date',
                    displayFormat: 'yy-mm-dd',
                    create: false,
                    edit: false,
                    sorting: false //This column is not sortable!
                }
            }
        });

        //Load person list from server
        $('#StudentTableContainer').jtable('load');

    });

</script>
<br />
<hr />
<h3>
    HTML code</h3>
<pre class="brush:html">&lt;div id=&quot;StudentTableContainer&quot;&gt;&lt;/div&gt;</pre>
<h3>
    Javascript code</h3>
    @{
        var sbHighlightBuilder = new StringBuilder("[10,24");
        for (int i = 25; i < 142; ++i)
        {
            sbHighlightBuilder.Append("," + i);
        }
        sbHighlightBuilder.Append("]");

        var jsHighlight = sbHighlightBuilder.ToString();
    }
<pre class="brush:js; highlight:@jsHighlight">&lt;script type=&quot;text/javascript&quot;&gt;

    $(document).ready(function () {

        $(&#39;#StudentTableContainer&#39;).jtable({
            title: &#39;Student List&#39;,
            paging: true, //Enable paging
            sorting: true, //Enable sorting
            defaultSorting: &#39;Name ASC&#39;,
            //openChildAsAccordion: true, //Enable this line to show child tabes as accordion style
            actions: {
                listAction: &#39;/Demo/StudentList&#39;,
                deleteAction: &#39;/Demo/DeleteStudent&#39;,
                updateAction: &#39;/Demo/UpdateStudent&#39;,
                createAction: &#39;/Demo/CreateStudent&quot;)&#39;
            },
            fields: {
                StudentId: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },
                //CHILD TABLE DEFINITION FOR &quot;PHONE NUMBERS&quot;
                Phones: {
                    title: &#39;&#39;,
                    width: &#39;5%&#39;,
                    sorting: false,
                    edit: false,
                    create: false,
                    display: function (studentData) {
                        //Create an image that will be used to open child table
                        var $img = $(&#39;&lt;img src=&quot;/Content/images/Misc/phone.png&quot; title=&quot;Edit phone numbers&quot; /&gt;&#39;);
                        //Open child table when user clicks the image
                        $img.click(function () {
                            $(&#39;#StudentTableContainer&#39;).jtable(&#39;openChildTable&#39;,
                                    $img.closest(&#39;tr&#39;),
                                    {
                                        title: studentData.record.Name + &#39; - Phone numbers&#39;,
                                        actions: {
                                            listAction: &#39;/Demo/PhoneList?StudentId=&#39; + studentData.record.StudentId,
                                            deleteAction: &#39;/Demo/DeletePhone&#39;,
                                            updateAction: &#39;/Demo/UpdatePhone&#39;,
                                            createAction: &#39;/Demo/CreatePhone&#39;
                                        },
                                        fields: {
                                            StudentId: {
                                                type: &#39;hidden&#39;,
                                                defaultValue: studentData.record.StudentId
                                            },
                                            PhoneId: {
                                                key: true,
                                                create: false,
                                                edit: false,
                                                list: false
                                            },
                                            PhoneType: {
                                                title: &#39;Phone type&#39;,
                                                width: &#39;30%&#39;,
                                                options: { &#39;1&#39;: &#39;Home phone&#39;, &#39;2&#39;: &#39;Office phone&#39;, &#39;3&#39;: &#39;Cell phone&#39; }
                                            },
                                            Number: {
                                                title: &#39;Phone Number&#39;,
                                                width: &#39;30%&#39;
                                            },
                                            RecordDate: {
                                                title: &#39;Record date&#39;,
                                                width: &#39;20%&#39;,
                                                type: &#39;date&#39;,
                                                displayFormat: &#39;yy-mm-dd&#39;,
                                                create: false,
                                                edit: false
                                            }
                                        }
                                    }, function (data) { //opened handler
                                        data.childTable.jtable(&#39;load&#39;);
                                    });
                        });
                        //Return image to show on the person row
                        return $img;
                    }
                },
                //CHILD TABLE DEFINITION FOR &quot;EXAMS&quot;
                Exams: {
                    title: &#39;&#39;,
                    width: &#39;5%&#39;,
                    sorting: false,
                    edit: false,
                    create: false,
                    display: function (studentData) {
                        //Create an image that will be used to open child table
                        var $img = $(&#39;&lt;img src=&quot;/Content/images/Misc/note.png&quot; title=&quot;Edit exam results&quot; /&gt;&#39;);
                        //Open child table when user clicks the image
                        $img.click(function () {
                            $(&#39;#StudentTableContainer&#39;).jtable(&#39;openChildTable&#39;,
                                    $img.closest(&#39;tr&#39;), //Parent row
                                    {
                                    title: studentData.record.Name + &#39; - Exam Results&#39;,
                                    actions: {
                                        listAction: &#39;/Demo/ExamList?StudentId=&#39; + studentData.record.StudentId,
                                        deleteAction: &#39;/Demo/DeleteExam&#39;,
                                        updateAction: &#39;/Demo/UpdateExam&#39;,
                                        createAction: &#39;/Demo/CreateExam&#39;
                                    },
                                    fields: {
                                        StudentId: {
                                            type: &#39;hidden&#39;,
                                            defaultValue: studentData.record.StudentId
                                        },
                                        StudentExamId: {
                                            key: true,
                                            create: false,
                                            edit: false,
                                            list: false
                                        },
                                        CourseName: {
                                            title: &#39;Course name&#39;,
                                            width: &#39;40%&#39;
                                        },
                                        ExamDate: {
                                            title: &#39;Exam date&#39;,
                                            width: &#39;30%&#39;,
                                            type: &#39;date&#39;,
                                            displayFormat: &#39;yy-mm-dd&#39;
                                        },
                                        Degree: {
                                            title: &#39;Degree&#39;,
                                            width: &#39;10%&#39;,
                                            options: [&quot;AA&quot;, &quot;BA&quot;, &quot;BB&quot;, &quot;CB&quot;, &quot;CC&quot;, &quot;DC&quot;, &quot;DD&quot;, &quot;FF&quot;]
                                        }
                                    }
                                }, function (data) { //opened handler
                                    data.childTable.jtable(&#39;load&#39;);
                                });
                        });
                        //Return image to show on the person row
                        return $img;
                    }
                },
                Name: {
                    title: &#39;Name&#39;,
                    width: &#39;20%&#39;
                },
                EmailAddress: {
                    title: &#39;Email address&#39;,
                    list: false
                },
                Password: {
                    title: &#39;User Password&#39;,
                    type: &#39;password&#39;,
                    list: false
                },
                Gender: {
                    title: &#39;Gender&#39;,
                    width: &#39;11%&#39;,
                    options: { &#39;M&#39;: &#39;Male&#39;, &#39;F&#39;: &#39;Female&#39; }
                },
                CityId: {
                    title: &#39;City&#39;,
                    width: &#39;12%&#39;,
                    options: &#39;/Demo/GetCityOptions&#39;
                },
                BirthDate: {
                    title: &#39;Birth date&#39;,
                    width: &#39;15%&#39;,
                    type: &#39;date&#39;,
                    displayFormat: &#39;yy-mm-dd&#39;
                },
                Education: {
                    title: &#39;Education&#39;,
                    list: false,
                    type: &#39;radiobutton&#39;,
                    options: { &#39;1&#39;: &#39;Primary school&#39;, &#39;2&#39;: &#39;High school&#39;, &#39;3&#39;: &#39;University&#39; }
                },
                About: {
                    title: &#39;About this person&#39;,
                    type: &#39;textarea&#39;,
                    list: false
                },
                IsActive: {
                    title: &#39;Status&#39;,
                    width: &#39;12%&#39;,
                    type: &#39;checkbox&#39;,
                    values: { &#39;false&#39;: &#39;Passive&#39;, &#39;true&#39;: &#39;Active&#39; },
                    defaultValue: &#39;true&#39;
                },
                RecordDate: {
                    title: &#39;Record date&#39;,
                    width: &#39;15%&#39;,
                    type: &#39;date&#39;,
                    displayFormat: &#39;yy-mm-dd&#39;,
                    create: false,
                    edit: false,
                    sorting: false //This column is not sortable!
                }
            }
        });

        //Load student list from server
        $(&#39;#StudentTableContainer&#39;).jtable(&#39;load&#39;);

    });

&lt;/script&gt;</pre>
<h3>
    Server side code</h3>
@Html.Partial("_PagedAndSortedMasterChildServerSideCodes")

